<template>
  <div class="Index">
    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>   
    </div>
    <ul class="tabBar">
      <router-link tag="li" :to="{name:'Movie'}" active-class="active">
        <span class="iconfont icon-dianying"></span>
        电影
      </router-link>
      <router-link tag="li" :to="{name:'Cinema'}" active-class="active">
        <span class="iconfont icon-yingyuan"></span>
        影院
      </router-link>
      <router-link tag="li" :to="{name:'BoxOffice'}" active-class="active">
        <span class="iconfont icon-piaofang"></span>
        票房
      </router-link>
      <router-link tag="li" :to="{name:'My'}" active-class="active">
        <span class="iconfont icon-wode"></span>
        我的
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {};
  }
};
</script>
<style lang="scss">
.Index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
  }
  .tabBar {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 1.1rem;
    border-top: 1px solid #ececec;
    box-sizing: border-box;
    > li {
      width: 1.1rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      &.active {
        color: var(--pColor);
      }
      > span.iconfont {
        font-size: 0.5rem;
      }
    }
  }
}
</style>
